<template>
  <div class="box">
    <header>
      <div class="same">
        <div class="header">
          <i @click="goto"
            ><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiangyou1"></use></svg></i
          ><span>预约挂号</span><span>&nbsp;</span>
        </div>
      </div>
      <div class="content">
        <nav>
          <section
            v-for="item in tab"
            :key="item.id"
            :class="{ liang: tabs == item.name }"
            @click="tabs = item.name"
          >
            {{ item.name }}
          </section>
        </nav>
      </div>
      <div class="dingdans" v-show="tabs == '全部'">
        <van-empty image="search" description="" v-show="yueyus.length == 0" />
        <div class="same">
          <div class="dingdan" v-for="item in yueyus" :key="item.id">
            <p class="name">{{ item.hospitalId }}</p>
            <dl>
              <dd>
                宠物名称<span>{{ item.chongwu }}</span>
              </dd>
              <dd>
                预约项目<span>{{ item.tab }}</span>
              </dd>
              <dd>
                预约时间<span>{{ item.riqi }}{{ item.time }}</span>
              </dd>
              <dd>
                预约医生<span>{{ item.doctorId }}</span>
              </dd>
              <dd class="gua">
                挂号费<span>{{ item.price }}</span>
              </dd>
            </dl>
            <div class="btns">
              <button class="lianxi">联系门店</button>
              <button class="del" @click="del(item.id)">取消预约</button>
            </div>
          </div>
        </div>
      </div>
      <div class="gua" v-show="tabs == '挂号'">
        <van-empty
          image="search"
          description=""
          v-show="
            yueyus.length == 0 ||
            !yueyus.some(
              (item) =>
                item.tab == '门诊' || item.tab == '绝育' || item.tab == '疫苗'
            )
          "
        />
        <div class="same">
          <div
            class="dingdan"
            v-for="item in yueyus"
            :key="item.id"
            v-show="
              item.tab == '门诊' || item.tab == '绝育' || item.tab == '疫苗'
            "
          >
            <p class="name">{{ item.hospitalId }}</p>
            <dl>
              <dd>
                宠物名称<span>{{ item.chongwu }}</span>
              </dd>
              <dd>
                预约项目<span>{{ item.tab }}</span>
              </dd>
              <dd>
                预约时间<span>{{ item.riqi }}{{ item.time }}</span>
              </dd>
              <dd>
                预约医生<span>{{ item.doctorId }}</span>
              </dd>
              <dd class="gua">
                挂号费<span>{{ item.price }}</span>
              </dd>
            </dl>
            <div class="btns">
              <button class="lianxi">联系门店</button>
              <button class="del" @click="del(item.id)">取消预约</button>
            </div>
          </div>
        </div>
      </div>
      <div class="xi" v-show="tabs == '洗美'">
        <van-empty
          image="search"
          description=""
          v-show="
            yueyus.length == 0 ||
            !yueyus.some(
              (item) =>
                item.tab == '洗浴' ||
                item.tab == 'SPA' ||
                item.tab == '美容' ||
                item.tab == '贴心服务'
            )
          "
        />
        <div class="same">
          <div class="same">
            <div
              class="dingdan"
              v-for="item in yueyus"
              :key="item.id"
              v-show="
                item.tab != '门诊' && item.tab != '绝育' && item.tab != '疫苗'
              "
            >
              <p class="name">{{ item.hospitalId }}</p>
              <dl>
                <dd>
                  宠物名称<span>{{ item.chongwu }}</span>
                </dd>
                <dd>
                  预约项目<span>{{ item.tab }}</span>
                </dd>
                <dd>
                  预约时间<span>{{ item.riqi }}{{ item.time }}</span>
                </dd>
                <dd>
                  预约医生<span>{{ item.doctorId }}</span>
                </dd>
                <dd class="gua">
                  挂号费<span>{{ item.price }}</span>
                </dd>
              </dl>
              <div class="btns">
                <button class="lianxi">联系门店</button>
                <button class="del" @click="del(item.id)">取消预约</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
import { ContactCard, Dialog } from "vant";
import { yuyue, delyuyue } from "../../api/hospital";
export default {
  data() {
    return {
      yueyus: [],
      toke: this.$store.state.token,
      tabs: "全部",
      tab: [
        { id: 1, name: "全部" },
        { id: 2, name: "挂号" },
        { id: 3, name: "洗美" },
      ],
    };
  },
  methods: {
    del(id) {
      Dialog.confirm({
        title: "取消预约",
        message: "确认取消预约吗？",
      })
        .then(() => {
          delyuyue(id).then((res) => {
            this.getyuyue();
          });
        })
        .catch(() => {});
    },
    goto() {
      this.$router.go(-1);
    },
    getyuyue() {
      yuyue().then((res) => {
        // console.log(this.toke === "");
        if (this.token === "") {
          this.yueyus = [];
          console.log(1);
        } else {
          this.yueyus = res.data.data.filter(
            (item) => item.usersId == this.$store.state.user.id
          );
        }
        // console.log(this.yueyus);
        // if (this.$state.token != "") {
        // }
        // this.yueyus = res.data.data;
      });
    },
  },
  created() {
    this.getyuyue();
  },
};
</script>

<style lang="scss" scoped>
.liang {
  color: rgb(206, 61, 4);
}
.box {
  background: #0f0;
}
header {
  background: #fff;
  .header {
    font-size: 4.7vw;
    display: flex;
    justify-content: space-between;
    padding: 3vh;
    align-items: center;
    i {
      transform: rotate(180deg);
    }
  }
}
.content {
  padding: 0 3vw;
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.dingdans {
  margin-top: 2vw;
  padding: 3vw;
  .dingdan {
    margin-bottom: 2vw;
    border-left: 4px solid rgb(52, 194, 24);
    border-radius: 1vw 0 0 1vw;
    .name {
      padding: 4vw;
    }
    dl {
      border-top: 1px solid #ccc;
      dd {
        font-size: 3.5vw;
        padding: 2vw 4vw;
        color: #ccc;
        span {
          margin-left: 1vw;
          color: #333;
        }
      }
      .gua {
        padding: 0 0 4vw 0;
        margin-left: 4vw;
        margin-top: 2vw;
        border-bottom: 1px solid #ccc;
      }
    }
    .btns {
      margin-top: 2vw;
      display: flex;
      justify-content: end;
      .lianxi {
        color: rgb(250, 176, 39);
        border: 1px solid rgb(250, 176, 39);
        border-radius: 5vw;
        margin-right: 2vw;
        padding: 2vw 5vw;
        font-size: 1vw;
        background: transparent;
      }
      .del {
        color: rgb(97, 97, 97);
        border: 1px solid rgb(97, 97, 97);
        border-radius: 5vw;
        margin-right: 2vw;
        padding: 2vw 5vw;
        font-size: 1vw;
        background: transparent;
      }
    }
  }
}
.gua {
  margin-top: 2vw;
  padding: 3vw;
  .dingdan {
    margin-bottom: 2vw;
    border-left: 4px solid rgb(52, 194, 24);
    border-radius: 1vw 0 0 1vw;
    .name {
      padding: 4vw;
    }
    dl {
      border-top: 1px solid #ccc;
      dd {
        font-size: 3.5vw;
        padding: 2vw 4vw;
        color: #ccc;
        span {
          margin-left: 1vw;
          color: #333;
        }
      }
      .gua {
        padding: 0 0 4vw 0;
        margin-left: 4vw;
        margin-top: 2vw;
        border-bottom: 1px solid #ccc;
      }
    }
    .btns {
      margin-top: 2vw;
      display: flex;
      justify-content: end;
      .lianxi {
        color: rgb(250, 176, 39);
        border: 1px solid rgb(250, 176, 39);
        border-radius: 5vw;
        margin-right: 2vw;
        padding: 2vw 5vw;
        font-size: 1vw;
        background: transparent;
      }
      .del {
        color: rgb(97, 97, 97);
        border: 1px solid rgb(97, 97, 97);
        border-radius: 5vw;
        margin-right: 2vw;
        padding: 2vw 5vw;
        font-size: 1vw;
        background: transparent;
      }
    }
  }
}
.xi {
  margin-top: 2vw;
  padding: 3vw;
  .dingdan {
    margin-bottom: 2vw;
    border-left: 4px solid rgb(52, 194, 24);
    border-radius: 1vw 0 0 1vw;
    .name {
      padding: 4vw;
    }
    dl {
      border-top: 1px solid #ccc;
      dd {
        font-size: 3.5vw;
        padding: 2vw 4vw;
        color: #ccc;
        span {
          margin-left: 1vw;
          color: #333;
        }
      }
      .gua {
        padding: 0 0 4vw 0;
        margin-left: 4vw;
        margin-top: 2vw;
        border-bottom: 1px solid #ccc;
      }
    }
    .btns {
      margin-top: 2vw;
      display: flex;
      justify-content: end;
      .lianxi {
        color: rgb(250, 176, 39);
        border: 1px solid rgb(250, 176, 39);
        border-radius: 5vw;
        margin-right: 2vw;
        padding: 2vw 5vw;
        font-size: 1vw;
        background: transparent;
      }
      .del {
        color: rgb(97, 97, 97);
        border: 1px solid rgb(97, 97, 97);
        border-radius: 5vw;
        margin-right: 2vw;
        padding: 2vw 5vw;
        font-size: 1vw;
        background: transparent;
      }
    }
  }
}
</style>